<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>基金理财</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item><a @click="cut('Main')">首页</a></el-breadcrumb-item>
        <el-breadcrumb-item><a @click="cut('Money')">个人理财</a></el-breadcrumb-item>
        <el-breadcrumb-item><a @click="cut('ChangeMoney')">零钱理财</a></el-breadcrumb-item>
    </el-breadcrumb>
    <h2><span>基金理财推荐</span></h2>
    <hr>
    <template>
        <div class="table">
            <el-table
                    :data="FundList"
                    style="width: 100%">
                <el-table-column
                        prop="f_id"
                        label="序号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="fundType.type_code"
                        label="基金代码"
                >
                </el-table-column>
                <el-table-column
                        prop="fundType.type_abbreviate"
                        label="基金简称"
                >
                </el-table-column>
                <el-table-column
                        prop="fundType.type_name"
                        label="基金类型"
                >
                </el-table-column>
                <el-table-column label="日增长率">
                    <template slot-scope="scope">
                        {{scope.row.growthRate.g_day+'%'}}
                    </template>
                </el-table-column>
                <el-table-column label="月增长率">
                    <template slot-scope="scope">
                        {{scope.row.growthRate.g_month+'%'}}
                    </template>
                </el-table-column>
                <el-table-column label="年增长率">
                    <template slot-scope="scope">
                        {{scope.row.growthRate.g_year+'%'}}
                    </template>
                </el-table-column>
                <el-table-column label="起投金额">
                    <template slot-scope="scope">
                        {{scope.row.f_amount+'元'}}
                    </template>
                </el-table-column>
                <el-table-column label="投资期限">
                    <template slot-scope="scope">
                        {{scope.row.investmentHorizon.h_day+'天'}}
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button   @click="add(scope.row.f_id)" class="btn btn-info" data-toggle="modal" data-target="#myModal" style="background-color: #26BABD">$ 投资</i></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- total:总条数 prev:上一页  pager:当前页 next:上一页 jumper 前往第几页-->
            <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    @size-change="handleSizeFund"
                    @current-change="handleCurrentFund">
            </el-pagination>
        </div>
    </template>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">投资信息</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <form>
                    <div class="modal-body input-group">
                        <div class="container mt-3">
                            <div class="input-group mb-3" hidden>
                                <div class="input-group-prepend">
                                    <span class="input-group-text">序号：</span>
                                </div>
                                <input type="text" class="form-control" placeholder="序号：" v-model="Funds.f_id" name="f_id" readonly>
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">基金代码：</span>
                                </div>
                                <input type="text" class="form-control" placeholder="基金代码：" v-model="types.type_code" name="type_code" readonly>
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">基金简称：</span>
                                </div>
                                <input type="text" class="form-control" placeholder="基金简称：" v-model="types.type_abbreviate" name="type_abbreviate" readonly>
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">基金类型：</span>
                                </div>
                                <input type="text" class="form-control" placeholder="基金类型：" v-model="types.type_name" name="type_name" readonly>
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">日增长率：</span>
                                </div>
                                <input type="text" class="form-control" placeholder="日增长率：" v-model="groups.g_day"  name="g_day" readonly>%
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">月增长率：</span>
                                </div>
                                <input type="text" class="form-control" placeholder="月增长率：" v-model="groups.g_month"  name="g_month" readonly>%
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">年增长率：</span>
                                </div>
                                <input type="text" class="form-control" placeholder="年增长率：" v-model="groups.g_year"  name="g_year" readonly>%
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">起投金额：</span>
                                </div>
                                <input type="text" id="famount" class="form-control" placeholder="起投金额：" v-model="Funds.f_amount"  name="f_amount" readonly>元
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">投资金额：</span>
                                </div>
                                <input type="text" id="amounts" class="form-control" placeholder="投资金额：" name="amount" v-model="amount" >元（投资金额不能低于起投金额）
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">投资期限：</span>
                                </div>
                                <input type="text" class="form-control" placeholder="投资期限：" v-model="inv.h_day"  name="h_day" readonly>天
                            </div>
                        </div>
                        <div class="container mt-3">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">选定银行卡：</span>
                                </div>
                                <select id="res">
                                    <option>---请选择---</option>
                                    <option v-for="b in bank"  name="b_name"  :value="b.bank_id">{{b.bank.b_name}}({{b.bank_card}})</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" @click="addFunds(Funds.f_id,amount,types.type_abbreviate)">投资</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<style>
    .el-breadcrumb{
        margin-bottom: 15px;
        font-size: 12px;
    }
    .el-card{
        box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
</style>

<script type="text/javascript">
    new Vue( {
        el:"#app",
        data:{
            amount:'',
            currentPage:1, //初始页
            pageSize:5,    //    每页的数据
            total:1,
            FundList: [],
            fund:{
                f_id:'',
                amount:'',
                type_abbreviate:''
            },
            FundId:{
                f_id:''
            },
            Funds:{},
            inv:{},
            groups:{},
            types:{},
            bank:[],
            personUser:{}
        },
        methods: {
            add(f_id){
                var fundId = this;
                this.FundId.f_id=f_id;
                axios.post('/person/selectFundById/',"f_id="+f_id).then(res=>{
                    fundId.Funds=res.data.fundManagement;
                    fundId.inv=res.data.Invest;
                    fundId.groups=res.data.groups;
                    fundId.types=res.data.types;
                    fundId.bank=res.data.bank;
                    fundId.personUser=res.data.personUser;
                    for(let i=0;i<this.bank.length;i++) {
                        let cardName = this.bank[i].bank_card;
                        let cardLenth = cardName.length;
                        let name = cardName.substring(cardLenth - 4, cardLenth.length);
                        this.bank[i].bank_card=name;
                    }
                })
            },
            handleSizeFund(pageSize){
                this.pageSize = pageSize;
                // 点击每页显示的条数时，显示第一页
                this.showData(this.currentPage,this.pageSize)
            },

            showData(currentPage,pageSize){
                var fund = this;
                axios.get("/person/getFundList/"+currentPage+"/"+pageSize).then(res=>{
                    console.log(res);
                    fund.FundList = res.data.list;
                    fund.total = res.data.total;
                    console.log(res.data.list);
                })
            },
            handleCurrentFund(currentPage){
                this.currentPage = currentPage;
                // 点击每页显示的条数时，显示第一页
                this.showData(this.currentPage,this.pageSize);
            },
            addFunds(f_id,amount,type_abbreviate){
                var msg = "您真的确定要投资吗？\n\n请确认！";
                if (confirm(msg)==true) {
                    let f_amounts=document.getElementById("famount").value;
                    let amounts=document.getElementById("amounts").value;
                    let obj = document.getElementById("res"); //定位id
                    let index = obj.selectedIndex; // 选中索引
                    let bid = obj.options[index].value; // 选中值
                    if(amounts==null && amounts==''){
                        alert("投资金额不能为空！！！");
                        return false;
                    }
                    if(amounts<f_amounts){
                        alert("投资金额不能小于起投金额");
                        return false;
                    }
                    this.$prompt('请输入密码', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputErrorMessage: '密码格式不正确',
                        inputPlaceholder:'password',
                        inputType:'password'
                    }).then(({ value }) => {
                        if(value!=null&&value==this.personUser.deal_pwd){
                            alert("卖入成功");
                            window.location.href="FundManagement.html";
                            return true;
                        }else {
                            alert("密码不正确！！！");
                            return false;
                        }
                    })
                        this.fund.f_id=f_id;
                        this.fund.amount=amount;
                        this.fund.type_abbreviate=type_abbreviate;
                    axios.post('/person/selectFundMoneys', "f_id=" + f_id + "&amount=" + amount + "&type_abbreviate=" +type_abbreviate+"&bank_id="+bid).then(res => {
                        console.log(res.data)
                    })
                }else{
                    alert("卖入失败");
                    window.location.href="FundManagement.html";
                    return false;
                }
            }
        },created() {
            this.showData(1, 5)
        }
    })
</script>
</html>